<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专家评估</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<style>
    html,body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    #test3 {
        height:100%;
    }
    .el-container {
        height:100%;
    }
    .el-aside {
        color: #333;
        text-align: center;
        line-height: 200px;
        height:100%;
        padding:5px 5px 5px 0;
    }

    .el-main {
        color: #333;
        text-align: center;
        height:100%;
        padding:5px;
        box-sizing: border-box;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    /*title样式*/
    .title_box {
        overflow: hidden;
        display: block;
    }
    .title_name {
        float: left;
        display: block;
        height:25px;
        line-height:25px;
    }

    .title_name span {
        display: inline-block;
        width: 3px;
        height: 21px;
        background-color: #44bfca;
        vertical-align: sub;
    }

    .title_name h3 {
        display: inline-block;
        font-weight: bolder;
        margin:0;
        height:25px;
        line-height:25px;
    }
    /*场景模板样式*/
    .list-group-item {
        height: 30px;
        line-height: 30px;
        text-align: left;
        padding:5px 0 5px 10px;
        margin: 2px auto;
        width: 100%;
        font-weight: normal;
        font-size:14px;
    }
    .list-active {
        background-color:#ebebeb;
    }
    .el-main .el-card__body {
        height:100%;
        box-sizing: border-box;
    }
    .list-group-item:hover {
        cursor: default;
        background-color: #ebebeb;
    }
    .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        padding:0;
    }
    .el-card__body {
        padding:0;
    }
    .el-main .el-card__body {
        padding:20px;
    }
    .list_box {
        margin-top:5px;
    }
    /*对话框样式*/
    #orderList {
        height:calc(100% - 120px);
        border:1px solid #ccc;
        border-radius:4px;
        margin-bottom: 20px;
    }
    #orderList ul {
        box-sizing: border-box;
    }
    #actions {
        height:100px;
        line-height:100px;
        vertical-align: middle;
        border:1px solid #ccc;
        border-radius:4px;
    }
    #orderList li {
        list-style:none;
        margin:15px;
        text-align: left;
        border:1px solid #FFF;
        padding:10px;
        border-radius:4px;
    }
    #orderList li:hover {
        background-color:#00BFFF;
        cursor:default;
    }
    /*当前指令样式*/
    .active {
        background-color:#00BFFF!important;
    }
</style>
<div id="test3">
    <el-container>
        <el-main>
            <el-card style="height:100%;box-sizing: border-box;">
                <div id="orderList">
                    <ul>
                        <li v-for="(item,index) in roleOrderList" :key="index" :class="activeRoleid==item.roleid?'active':''" @click="actionClick(item.roleid)">
                            <el-tag>{{item.role}}</el-tag>
                            {{item.order}}
                        </li>
                    </ul>
                </div>
                <div id="actions">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button>保存</el-button>
                </div>
            </el-card>
        </el-main>
        <el-aside width="250px">
            <el-card style="height:100%;box-sizing:border-box;">
                <div class="title_box" style="margin-top:12px;margin-left:12px;">
                    <div class="title_name">
                        <span></span>
                        <h3>场景列表</h3>
                    </div>
                </div>
                <div class="list_box">
                    <div class="list-group-item" :class="[activeSceneid==item.sceneid?'list-active':'']"
                         v-for="(item,index) in planRoleList"
                         :key="item.index" @click="clickScene(item)" >
                        {{index+1+"、"+item.sceneName }}
                    </div>
                </div>
            </el-card>
        </el-aside>
    </el-container>
</div>
<script>
    var test3 = new Vue({
        el:"#test3",
        data(){
            return {
                activeSceneid:"",
                sceneData:"",
                planRoleList: [{
                    sceneName: "信息报送",
                    sceneid: 197,
                    rows: [{
                        roleid: 15,
                        rolesName: "前端攻城狮",
                        userId: null,
                        planroleid: 7
                    }, {
                        roleid: 9,
                        rolesName: "出纳",
                        userId: 5,
                        planroleid: 8
                    }, {
                        roleid: 16,
                        rolesName: "java攻城狮",
                        userId: ""
                    }]
                }, {
                    sceneName: "服务器宕机",
                    sceneid: 198,
                    rows: [{
                        roleid: 10,
                        rolesName: "测绘",
                        userId: 1,
                        planroleid: 2
                    }, {
                        roleid: 9,
                        rolesName: "出纳",
                        userId: 4,
                        planroleid: 3
                    }]
                }, {
                    sceneName: "机房断电",
                    sceneid: 199,
                    rows: [{
                        roleid: 10,
                        rolesName: "测绘",
                        userId: ""
                    }, {
                        roleid: 12,
                        rolesName: "审核",
                        userId: 1,
                        planroleid: 9
                    }]
                }, {
                    sceneName: "紧急处理",
                    sceneid: 200,
                    rows: [{
                        roleid: 15,
                        rolesName: "前端攻城狮",
                        userId: 5,
                        planroleid: 4
                    }, {
                        roleid: 9,
                        rolesName: "出纳",
                        userId: 4,
                        planroleid: 5
                    }, {
                        roleid: 8,
                        rolesName: "会计",
                        userId: 1,
                        planroleid: 6
                    }]
                }],
                //角色指令
                roleOrderList:[
                    {roleid:1,role:"测试角色1",order:"测试指令1"},
                    {roleid:2,role:"测试角色2",order:"测试指令2"},
                    {roleid:3,role:"测试角色3",order:"测试指令3"},
                    {roleid:4,role:"测试角色4",order:"测试指令4"},
                    {roleid:5,role:"测试角色5",order:"测试指令5"},
                    {roleid:6,role:"测试角色6",order:"测试指令6"},
                ],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                activeRoleid:null,
            }
        },
        mounted(){
            this.activeSceneid = this.planRoleList[0].sceneid;
            this.sceneData = this.planRoleList[0];

            this.activeRoleid = 1;
        },
        methods:{
            clickScene(item){
                //当前场景标签切换
                this.activeSceneid = item.sceneid;
                //当前场景数据赋值
                this.sceneData = item;
            },
            actionClick(id){
                this.activeRoleid = id;
            }
        }
    })
</script>
</body>
</html>